<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">用户资料</el-menu-item>
      <el-menu-item index="2">用户注册</el-menu-item>
      <el-menu-item index="3">用户登录</el-menu-item>
    </el-menu>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import ZiliaoView from "@/components/function/ZiliaoView.vue";
import ZhuceView from "@/components/function/ZhuceView.vue";
import DengluView from "@/components/function/DengluView.vue";

export default {
  name: 'Revenue',
  components: {
    ZiliaoView,
    ZhuceView,
    DengluView
  },
  data() {
    return {
      activeIndex: '1',
      currentComponent: 'ZiliaoView'
    };
  },
  methods: {
    handleSelect(key) {
      this.activeIndex = key;
      switch (key) {
        case '1':
          this.currentComponent = 'ZiliaoView';
          break;
        case '2':
          this.currentComponent = 'ZhuceView';
          break;
        case '3':
          this.currentComponent = 'DengluView';
          break;
      }
    }
  }
};
</script>

<style>
</style>